﻿<template name="kefu">
	<view>
		<movable-area class="movable-area">
			<movable-view class="online-contact" :position="position" :x="x" :y="y" :direction="direction"
				:damping="damping" @change="onChange" @touchend="onTouchend">
				<view class="" @click="onTap">
					<service-btn v-if="init"></service-btn>
				</view>

			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import {
		getHomeInfo
	} from "@/api/index.js";
	export default {
		data() {
			return {
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				init: false
			}
		},
		name: "kefu",
		props: {
			qq: {
				type: Number,
				default: null
			},
			damping: {
				type: Number,
				default: 100
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			},
			openid: {
				type: String,
				default: ''
			}
		},
		methods: {
			bindaddfriend(e) {
				console.log(e)
			},
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				// setTimeout(() => {
				if (this.move.x < this.x2 / 2) this.x = this.x1;
				else this.x = this.x2;
				// console.log(this.x, this.y)
				// }, 100)
			},
			async onTap() {
				let {
					data
				} = await getHomeInfo({
					code: "COMPANYPHONE",
				});
				uni.makePhoneCall({
					phoneNumber: data.paramConf,
					success: () => {
						console.log('拨号成功');
					},
					fail: (err) => {
						console.error('拨号失败:', err);
					}
				});
				console.log(data.paramConf, 123);
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 10;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 50;
					this.y2 = parseInt(res.windowHeight) - 60;
					// setTimeout(() => {
					if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
					if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
					if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
					if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
					this.move.x = this.x;
					this.move.y = this.y;
					setTimeout(() => {
						this.init = true
					}, 500)
					// }, 1000)
				}
			})
		}
	}
</script>
<style>
	.movable-area {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		pointer-events: none;
		top: 0;
		left: 0;
	}

	.online-contact {
		pointer-events: auto;
	}

	.online-contact .online-contact-button {
		width: 50px;
		height: 50px;
		background: rgba(0, 0, 0, 0);
		border: none;
		padding: 0;
		margin: 0;
	}

	.online-contact .online-contact-button::after {
		content: inherit;
		border: none;
		padding: 0;
		margin: 0;
	}

	.online-contact .online-contact-image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
</style>